<template>
    <div>
        <!-- 2、调用引入的公共组件 -->
        <!-- 可以使用引入的名称驼峰命名的组件 -->
        <HeaderCom/>
        <!-- 也可以用小写字符搭配-进行连续调用组件 -->
        <!-- 传普通字符串自定义的属性不需要加v-bind：
        ，传递数字、布尔值、动态的响应式数据需要加v-bind： -->
        <!-- 传递属性名称时如果是驼峰命名成小写字母用-进行连接，子组件正常使用 -->
        <!-- 父组件接收子组件传递的数据，通过v-on绑定映射过来的方法名称进行接受 -->
        <section-com msg="父组件的数据" :boo="100" :list-Data="list" @send-com="fromSectionCom"></section-com>
        <FooterCom/>
    </div>
</template>

<script setup lang="ts">
//1、引入拆分的公共组件
import HeaderCom from '@/components/HeaderCom.vue';
import SectionCom from '@/components/SectionCom.vue';//@是绝对路径符号
import FooterCom from '@/components/FooterCom.vue';

import {ref} from 'vue'

//组件通信-父组件ComView给子组件SectionCom传递数据
//通过在子组件标签上自定义属性进行传参

const list=ref<Array<string>>(['苹果','西瓜','香蕉'])//数组字符串

    //接收子组件传递过来的方法和数据
    //默认参数就是传递过来的数据
function fromSectionCom(value:number){
    console.log('子组件传递的数据',value);
    
}

</script>

<style scoped>

</style>